<template>
    <div class="goods">
        <ul>
            <li v-for="item in goodsList" :key="item.id">
                <!-- 商品上半部分 -->
                <div class="goods-top">
                    <img :src="item.imgUrl" alt="">
                    <div class="goods-icon">
                        <img class="left" :src="item.leftImgUrl" alt="">
                        <img class="right" :src="item.rightImgUrl" alt="">
                    </div>
                    <div class="goods-avator">
                        <img src="../../../public/images/t-1.webp" alt="">
                        <span class="avatorname">{{ item.avatorname }}</span>
                        <span class="avatortag">{{ item.avatortag }}</span>
                    </div>
                </div>
                <!-- 商品下半部分 -->
                <div class="goods-bottom">
                    <h3></h3>
                    <div class="price">
                        <span class="fuhao">￥</span>
                        <span class="jine">¥{{ item.price }}</span>
                        <span class="baoyou">
                            <img :src="item.byImgUrl" alt="">
                        </span>
                        <span class="xiaoliang">销售{{ item.sales }}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
//获取父组件传递过来的数据
const { goodsList } = defineProps(['goodsList'])
</script>

<style scoped>
.goods {
    width: 100%;
    height: 30rem;
    /* background-color: red; */
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.1875rem;
}

.goods ul {
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid #ccc; */
}

.goods ul li {
    width: calc(50% - 0.25rem);
    border-radius: 0.3125rem;
    /* border: 1px solid #e18282; */
    overflow: hidden;
    background-color: #fff;
    margin: 0.125rem;
}

.goods ul li .goods-top img {
    width: 100%;
    height: 6.125rem;
}

.goods ul li .goods-top {
    position: relative;
    height: 6.125rem;
}

.goods ul li .goods-top .goods-icon .left {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.2rem;
    height: 1.1rem;
}

.goods ul li .goods-top .goods-icon .right {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.7rem;
    height: 0.7rem;
}

/* ---------商品图上方两个图片样式--------------- */
.goods ul li .goods-top .goods-avator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.9375rem;
    padding: 0 0 0 0.3125rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;

}

.goods ul li .goods-top .goods-avator img {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.125rem;
}

.goods ul li .goods-top .goods-avator .avatorname {
    font-size: 0.35rem;
    margin-right: 0.125rem;
    color: #fff;
}

.goods ul li .goods-top .goods-avator .avatortag {
    font-size: 0.3rem;
    padding: 0 0.125rem;
    background-color: rgba(0, 0, 0, .5);
    color: white;
    border-radius: 0.0625rem;
}

/* ---------商品图下方个人信息样式--------------- */
.goods ul li .goods-bottom {
    width: 100%;
    padding: 0.1875rem;
    box-sizing: border-box;
}

.goods ul li .goods-bottom h3 {
    font-size: 0.359rem;
    font-weight: 100;
}

.goods ul li .goods-bottom .price {
    width: 100%;
    height: 0.625rem;
    position: relative;
    margin-bottom: 0.3125rem;
}

.goods ul li .goods-bottom .price .fuhao {
    font-size: 0.375rem;
    color: #f46;
}

.goods ul li .goods-bottom .price .jine {
    font-size: 0.5625rem;
    color: #f46;
}

.goods ul li .goods-bottom .price .baoyou img {
    width: 0.6875rem;
    height: 0.375rem;
    margin-left: 0.1875rem;
}

.goods ul li .goods-bottom .price .xiaoliang {
    padding: 0.0625rem 0.125rem;
    font-size: 0.3125rem;
    background-color: #ffecef;
    color: #f46;
    position: absolute;
    right: 0;
    top: 0.1875rem;
    border-radius: 0.3125rem;
}
</style>